<script setup>
const list = ref([
  {
    "assistantId": "pCwCLmfl48p7",
    "name": "小朋友的故事屋",
    "description": "小朋友的故事屋可以根据需要的主题生成出图文故事",
    "logo": "https://hunyuan-base-prod-1258344703.cos.ap-guangzhou.myqcloud.com/hunyuan_open/agentlogo/091b2322d19771cda94eccee62f03fa9.png",
    "to": "https://yuanqi.tencent.com/agent/pCwCLmfl48p7?from=share&shareId=TK5rN7MMKrQy"
  },
  {
    "assistantId": "ogKZMi24zGJk",
    "name": "隔壁大妈",
    "description": "隔壁大妈是一个脾气不好的编程巨星,她掌握Java、python、人工智能AI等各项领域的技能,但是脾气不好说话很冲.",
    "logo": "https://hunyuan-base-prod-1258344703.cos.ap-guangzhou.myqcloud.com/hunyuan_open/agentlogo/63b5448a11e415d3604baef0b5a33944.png",
    "to": "https://yuanqi.tencent.com/agent/ogKZMi24zGJk?from=share&shareId=F9Q1sqbFBvtb"

  },
  {
    "assistantId": "mmbnqMnLdYz0",
    "name": "隔壁老王",
    "description": "扮演隔壁老王，完全精通编程知识点，会图片修改，图片生成，图片解析。",
    "logo": "https://hunyuan-base-prod-1258344703.cos.ap-guangzhou.myqcloud.com/hunyuan_open/agentlogo/20240522100010_6af83d277ea14861d4ac43e41904700a.png",
    "to": "https://yuanqi.tencent.com/agent/mmbnqMnLdYz0?from=share&shareId=PBGhVPTaj1Pw"

  }
])
const { proxy } = getCurrentInstance()
const toUrl = (item) => {
  // 新开页面跳转
  window.open(item.to)
}

const handleUseAgent = (item) => {
  proxy.$emit('handleUseAgent', item)
}

defineExpose({
  handleUseAgent
})
</script>

<template>
  <div class="card" v-for="(item) in list" :key="item.agentId">
    <div class="card-header">
      <img
        :src="item.logo"
        :alt="item.description" class="card-image"/>
      <div class="card-content">
        <h3>{{ item.name }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
    <div class="card-footer">
      <span class="status">已发布</span>
      <div class="buttons">
        <button class="btn edit" @click="toUrl(item)">点击在线体验</button>
        <button class="btn experience" @click="handleUseAgent(item)">使用智能体</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}


.card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  background-color: #fff;
  margin: 10px auto;
}

.card-header {
  display: flex;
  align-items: center;
}

.card-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  animation: shake 1s infinite;
}

.card-content {
  flex: 1;
}

.card-content h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.card-content p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.timestamp {
  font-size: 12px;
  color: #999;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.status {
  font-size: 14px;
  color: #28a745;
}

.buttons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.btn.edit {
  color: #28a745;
}

.btn.experience {
  color: #007bff;
}

.btn.more {
  color: #333;
}
</style>
